<template>
	<el-dialog :visible.sync="visible" width="754px" top="0" append-to-body class="exam_answer_wrapper">
		<div class="exam_answer_report" id="printContent" v-loading="loading">
			<div class="header">
				<img :src="printBg" />
				<div class="title">
					<h2>武汉大学涉密人员保密培训</h2>
					<h2>考试成绩单</h2>
				</div>
				<div class="score">
					<img :src="scoreBg" />
					<font>{{ examHisData.score }}</font>
					<span>分</span>
				</div>
				<div class="result">
					<i :class="!isExamPass ? 'el-icon-exam-fail' : 'el-icon-exam-pass'"></i>
				</div>
			</div>
			<div class="kname">考试名称：{{ examHisData.examName }}</div>
			<div class="name">{{ examHisData.userAccount }}</div>
			<div class="time">学时：{{ totalHours }}学时(存档)</div>
			<div class="create">考试时间：{{ examHisData.createTime }}</div>
			<div class="button">
				<template v-if="!!isExam && !isExamPass">
					<span @click="handleAgainExam()">重新考试</span>
				</template>
				<span v-else v-print="printButton">打印成绩</span>
				<span @click="handleLookAnswer()">查看答案</span>
			</div>
		</div>
	</el-dialog>
</template>

<script>
import lodash from 'lodash';
import { courseDetail } from '@/api/course/sysCourse';
import { examHisDetail } from '@/api/exam/testExamHis';
import { queryDurationList } from '@/api/front/sysDurationLog';
import { queryExamCourseList } from '@/api/exam/testExamCourse';
export default {
	props: {
		value: { type: Boolean, default: false },
		resultId: { type: String, default: '' },
		isExam: { type: Boolean, default: false }
	},
	data() {
		return {
			loading: false,
			visible: this.value,
			courseData: {},
			examHisData: {},
			examCourseId: '',
			printButton: {
				id: 'printContent',
				popTitle: '添加'
			},
			scoreBg: require('@/assets/img/score_bg.png'),
			printBg: require('@/assets/img/dialog_bg.png')
		};
	},
	computed: {
		isExamPass() {
			return this.examHisData.examScore >= this.examHisData.passScore;
		},
		totalHours() {
			let sumHours = this.courseData.sumHours || '0';
			return parseFloat(sumHours) + this.examHisData.examHours;
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		async visible(flag) {
			this.$emit('input', flag);
			if (!!flag) {
				this.initializePage();
			} else if (this.isExam) {
				this.$router.back();
			}
		},
		isExamPass(flag) {
			if (!flag) return false;
			this.handleRecordDuration();
		}
	},
	methods: {
		async initializePage() {
			this.loading = true;
			await this.getExamHisDetail();
			await this.getExamCourseData();
			await this.getCourseDetail();
			this.loading = false;
		},

		//获取考试记录详情
		async getExamHisDetail() {
			let result = await examHisDetail(this.resultId).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				this.examHisData = this.formatExamHis(datas);
			}
		},

		//格式化考试历史
		formatExamHis(data) {
			let userData = data.sysUser || {};
			let examData = data.testExam || {};
			let examScore = parseFloat(data.score) || 0;
			let answerData = data.testPaperAnswerVOList || [];
			let passScore = parseFloat(examData.passScore) || 0;
			let examDuration = parseFloat(examData.examDuration) || 0;
			let examHours = Math.round((examDuration / 60) * 100) / 100;
			let fieldArr = ['name', 'score', 'createTime', 'testExamId'];
			let obj = { ...lodash.pick(data, fieldArr), userId: userData.id };
			let base = { userAccount: userData.account || '', examName: examData.name || '' };
			return { ...obj, ...base, examScore, passScore, answerData, examHours, examData };
		},

		//获取考试课程
		async getExamCourseData() {
			let params = { page: 1, limit: 1, examId: this.examHisData.testExamId };
			let result = await queryExamCourseList(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				this.examCourseId = datas.courseId;
			}
		},

		//获取课程详情
		async getCourseDetail() {
			let result = await courseDetail(this.examCourseId).then((res) => res.data);
			if (result.code === '0') {
				this.courseData = this.$detailData(result.data);
			}
		},

		//记录学时
		async handleRecordDuration() {
			let userId = this.examHisData.userId;
			let resId = this.examHisData.testExamId;
			let params = { page: 1, limit: 1, userId, resId, durationType: 'E' };
			let result = await queryDurationList(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				if (lodash.isEmpty(datas)) {
					let fieldArr = ['userId', 'resId', 'durationType'];
					let durationParams = lodash.pick(params, fieldArr);
					durationParams['duration'] = this.examHisData.examHours;
					this.$store.dispatch('addedDurationRecord', durationParams);
				}
			}
		},

		handleLookAnswer() {
			let examData = this.examHisData.examData;
			let answerData = this.examHisData.answerData;
			this.$bus.$emit('showExamAnswer', examData, answerData);
		},

		//重新考试
		handleAgainExam() {
			window.location.reload();
		}
	}
};
</script>
<style lang="scss">
.exam_answer_wrapper {
	padding: 16px;
	.el-dialog {
		border-radius: 6px;
		background-color: transparent;
	}
	.el-dialog__header {
		position: absolute;
		top: calc(100% + 20px);
		left: 50%;
		padding: 0;
		transform: translateX(-50%);
		border-bottom: none;
	}
	.el-dialog__headerbtn {
		position: unset;
		line-height: 1;
		padding: 6px;
		font-size: 0;
		border-radius: 50%;
		border: solid 1px #fff;
		.el-dialog__close {
			color: #fff;
			font-size: 16px;
		}
	}
	.el-dialog__body {
		padding: 0;
		overflow: hidden;
		max-height: none;
		border-radius: 6px;
	}
}
</style>
<style lang="scss" scoped>
.exam_answer_report {
	width: 100%;
	position: relative;
	border-radius: 4px;
	padding-bottom: 10px;
	background-color: #fff;
	.result {
		position: absolute;
		right: 0;
		top: calc(100% - 24px);
		font-size: 100px;
		line-height: 1;
		padding: 16px;
		.el-icon-exam-fail {
			color: #f56c6c;
		}
		.el-icon-exam-pass {
			color: #67c23a;
		}
	}
	.header {
		position: relative;
		margin-bottom: 80px;
		img {
			width: 100%;
		}
	}
	.title {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		padding-bottom: 40px;
		h2 {
			font-size: 32px;
			line-height: 1.5;
			text-align: center;
			color: #fff;
		}
	}
	.score {
		position: absolute;
		bottom: -75px;
		left: 50%;
		color: #fff;
		width: 140px;
		height: 160px;
		padding: 36px 0 0;
		margin-left: -70px;
		text-align: center;
		box-sizing: border-box;
		img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
		font {
			position: relative;
			z-index: 2;
			line-height: 1;
			font-size: 40px;
			font-weight: bold;
		}
		span {
			position: relative;
			z-index: 2;
			line-height: 1;
			font-size: 20px;
		}
	}
	.name {
		font-size: 20px;
		margin-top: 20px;
		text-align: center;
	}
	.time,
	.kname,
	.create {
		font-size: 18px;
		padding-top: 20px;
		text-align: center;
	}
	.button {
		display: flex;
		margin: 40px auto;
		overflow: hidden;
		border-radius: 24px;
		height: 48px;
		width: 320px;
		span {
			flex: 1;
			font-size: 16px;
			cursor: pointer;
			line-height: 48px;
			text-align: center;
			background-color: #fef0f0;
			border-left: solid 1px #fde2e2;
		}
	}
}

@media screen and (max-width: 767px) {
	.exam_answer_report {
		.header {
			margin-bottom: 50px;
		}
		.title h2 {
			font-size: 20px;
		}
		.score {
			width: 84px;
			height: 96px;
			bottom: -45px;
			padding-top: 25px;
			margin-left: -42px;
			font {
				font-size: 22px;
			}
			span {
				font-size: 14px;
			}
		}
		.result {
			top: calc(100% - 12px);
			padding: 10px;
			font-size: 60px;
		}
		.time,
		.kname,
		.create {
			font-size: 14px;
			padding-top: 16px;
			text-align: center;
		}
		.button {
			width: 280px;
			height: 40px;
			margin: 20px auto;
			span {
				font-size: 14px;
				line-height: 40px;
			}
		}
	}
}

@media print {
	.exam_answer_report {
		-webkit-print-color-adjust: exact;
		.name {
			font-size: 36px;
			margin-top: 72px;
		}
		.kname {
			font-size: 24px;
			padding-top: 72px;
		}
		.time,
		.create {
			font-size: 24px;
			margin-top: 72px;
		}
		.button {
			display: none !important;
		}
	}
}
</style>
